import React, { Component } from 'react'
import './Demo3.scss'
export default class Demo03 extends Component {
constructor(){
    super()
    this.state={
        list:[1,2,3,4,5,6,7,8,9]
    }  
    this.boxRef=React.createRef()  
}
componentDidMount(){
    setTimeout(() => {
        this.setState({
            list:[15,16,17,18,19,20,...this.state.list]
        })
    }, 5000);
}
getSnapshotBeforeUpdate(prevProps, prevState){
    return this.boxRef.current.scrollHeight
}
componentDidUpdate(prevProps, prevState, snapshot){
    console.log('------componentDidUpdate---------');
    let sh=this.boxRef.current.scrollHeight
    console.log('scrollHeight',sh);
    console.log('snapshot',snapshot);
    this.boxRef.current.scrollTop=sh-snapshot
}
 render() {
    console.log('------render---------');
    return (
      <div className='box' ref={this.boxRef}>
        {
            this.state.list.map(item=><div key={item} className='item'>
                {item}
            </div>)
        }
      </div>
    )
  }
}
